/*
*
*  Golden Grid System (1.0) <http//goldengridsystem.com/>
*  by Joni Korpi        <http//jonikorpi.com/>
*  licensed under MIT     <http//opensource.org/licenses/mit-license.php>
*
*/


//
// Important numbers
//

line = 24
column = 100% / 18
font-size = 16
em = font-size * 1


/*
*
*  Margin, padding, and border resets
*  except for form elements
*
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, nav, section, menu, time, mark, audio, video, canvas
  margin 0
  padding 0
  border 0


/*
*
*  Consistency fixes
*  adopted from http//necolas.github.com/normalize.css/
*
*/

html 
  height 100%
  -webkit-text-size-adjust 100%
  -ms-text-size-adjust 100%

body 
  min-height 100%
  font-size 100%

article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section, audio, canvas, video 
  display block

sub, sup 
  font-size 75%
  line-height 0
  position relative
  vertical-align baseline

sup 
  top -0.5em

sub 
  bottom -0.25em

pre 
  white-space pre
  white-space pre-wrap
  word-wrap break-word

b, strong 
  font-weight bold

abbr[title] 
  border-bottom 1px dotted

input, textarea, button, select 
  margin 0
  font-size 100%
  line-height normal
  vertical-align baseline

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] 
  cursor pointer
  -webkit-appearance button

input[type="checkbox"],
input[type="radio"] 
  -webkit-box-sizing border-box
  -moz-box-sizing border-box
  -ms-box-sizing border-box
  -o-box-sizing border-box
  box-sizing border-box

textarea 
  overflow auto

table 
    border-collapse collapse
    border-spacing 0



/*
*
*  Simple fluid media
*
*/

figure 
  position relative

figure img, figure object, figure embed, figure video 
  max-width 100%
  display block

img 
  border 0
  -ms-interpolation-mode bicubic



/*
*
* Zoomable baseline grid
* type size presets
*
*/

body
  /* 16px / 24px */
  font-size (font-size / 16) * 1em
  line-height (line / em) * 1em

.small 
  /* 13px / 18px */
  font-size ((font-size*0.8125) / em) * 1em
  line-height ((line*0.75) / (font-size*0.8125)) * 1em

.normal, h3 
  /* 16px / 24px */
  font-size (font-size / em) * 1em
  line-height (line / em) * 1em /* 24 */

.large, h2, h1 
  /* 26 / 36px */
  font-size (26 / em) * 1em
  line-height ((line*1.5) / 26) * 1em

hude(n=1)
  /* 42px / 48px */
  font-size (42 / em) * 1em
  line-height ((line*2) / 42) * 1em

.huge 
  hude()

.massive 
  /* 68px / 72px */
  font-size (68 / em) * 1em
  line-height ((line*3) / 68) * 1em

.gigantic 
  /* 110px / 120px */
  font-size (110 / em) * 1em
  line-height ((line*5) / 110) * 1em


/*
*
*  Four-column grid active
*  ----------------------------------------
*  Margin   | #  1   2   3   4   |   Margin
*  5.55555% | %  25  50  75  100 | 5.55555%
*
*/

header, #twoway 
  margin 0 column

h1, h2 
  margin (24/26*1em) 0 (36/26*1em)

h2 
  font-weight normal

h3 
  margin (24/em)*1em 0 (24/em) * 1em

/*
*  Simple elastic gutters
*  Note box-sizing will not work in IE6-7
*/

.wrapper 
  padding 0 ((line/2)/em) * 1em
  -webkit-box-sizing border-box
  -moz-box-sizing border-box
  -ms-box-sizing border-box
  box-sizing border-box


/*
*
*  Fixes for IE6-8
*  http//jonikorpi.com/leaving-old-IE-behind/
*
*/

.ie body 
  width (640/em) * 1em
  margin 0 auto
  font-size ((font-size + 1) / em) * 1em

.ie h1 
  hude()
  margin (48/42*1em) 0 (24/42*1em)

/* @media screen and (min-width: 640px) */
@media screen and (min-width: 40em) 

  body 
    /* Zoom baseline grid to 17/16 = 1.0625 */
    font-size ((font-size + 1) / em) * 1em
  
  h1 
    hude()
    margin (48/42*1em) 0 (24/42*1em)
  


/*
*
*  Eight-column grid active
*  ----------------------------------------------------------------------
*  Margin   | #  1     2     3     4     5     6     7     8   |   Margin
*  5.55555% | %  12.5  25.0  37.5  50.0  62.5  75.0  87.5  100 | 5.55555%
*
*
*/

/* @media screen and (min-width: 720px) */
@media screen and (min-width: 45em) 

  body 
    /* Reset baseline grid to 16/16 = 1 */
    font-size ((font-size) / em) * 1em
  
  #twoway .wrapper 
    float left
    width 50%
  


/* @media screen and (min-width: 888px) */
@media screen and (min-width: 55.5em) 

  body 
    /* Zoom baseline grid to 17/16 = 1.0625 */
    font-size ((font-size + 1) / em) * 1em
  

/* @media screen and (min-width: 984px) */
@media screen and (min-width: 61.5em) 

  body 
    /* Reset baseline grid to 16/16 = 1.0 */
    font-size ((font-size) / em) * 1em
  
  header, #twoway 
    margin 0 column*3
  


/* @media screen and (min-width: 1200px) */
@media screen and (min-width: 75em) 

  body 
    /* Zoom baseline grid to 17/16 = 1.0625 */
    font-size ((font-size + 1) / em) * 1em
  


/* @media screen and (min-width: 1392px) */
@media screen and (min-width: 87em) 

  body 
    /* Reset baseline grid to 16/16 = 1.0 */
    font-size ((font-size) / em) * 1em
  
  header, #twoway 
    margin 0 column*5
  


/* @media screen and (min-width: 1680px) */
@media screen and (min-width: 105em) 

  body 
    /* Zoom baseline grid to 17/16 = 1.0625 */
    font-size ((font-size + 1) / em) * 1em
  


/*
*
*  Sixteen-column grid active
*  ----------------------------------------------------------------------------------------------------------------------
*  Margin   | #  1     2     3     4     5     6     7     8     9     10    11    12    13    14    15    16  |   Margin
*  5.55555% | %  6.25  12.5  18.75 25.0  31.25 37.5  43.75 50.0  56.25 62.5  68.75 75.0  81.25 87.5  93.75 100 | 5.55555%
*
*
*/

/* @media screen and (min-width: 1872px) */
@media screen and (min-width: 117em) 

  header, #twoway 
    margin 0 column*1
  
  header .wrapper 
    width 37.5%
    margin-left 25%
  
  #twoway .wrapper 
    width 25%
  
  #twoway .wrapperfirst-child 
    margin-left 25%
  


/* @media screen and (min-width: 2080px) */
@media screen and (min-width: 130em) 

  body 
    /* Zoom baseline grid to 18/16 = 1.125 */
    font-size ((font-size + 2) / em) * 1em
    max-width (2560/em) * 1em
  
